<template>
	<view>
		<template v-if="value.style == 1">
			<view class="diy-seckill" v-if="timeList.length > 1 ||  (timeList.length == 1 && dataList.length )" :style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="marketing-wrap">
					<image :src="$util.img('/upload/uniapp/bargain/'+ value.bgSelect +'.png')" mode="widthFix"></image>
					
					<view class="marketimg-box">
						<view class="marketimg-box-title">
							<view class="marketimg-box-title-left">
								<image v-if="value.list.imageUrl" :src="$util.img(value.list.imageUrl)" mode="widthFix"></image>
								
								<view class="seckill-title-time color-base-border" v-if="isNow">
									<view class="seckill-title-name">距离结束</view>
									<view class="seckill-H">{{ seckillH ? seckillH : '00' }}</view>
									<view class="symbol">:</view>
									<view class="seckill-I">{{ seckillI ? seckillI : '00' }}</view>
									<view class="symbol">:</view>
									<view class="seckill-S">{{ seckillS ? seckillS : '00' }}</view>
								</view>
							</view>
							
							<view class="marketimg-box-title-right" :class="value.bgSelect" @click="toMore()">
								<text>更多秒杀</text>
								<text class="iconfont iconright"></text>
							</view>
						</view>
						
						<view class="seckill-time-list">
							<scroll-view class="seckil-nav" scroll-x="true" scroll-with-animation :scroll-into-view="'a' + seckillId">
								<!-- active 是选中之后的样式 -->
								<view class="nav-item" :id="'a' + item.id" :class="seckillId == item.id ? 'active' : ''" v-for="(item, key) in timeList" :key="key"
									@click="ontabtap(item.id, key)"
								>
									<view class="nav-item-con">
										<view class="nav-title">{{ transformSeckillTime(item.seckill_start_time )}}</view>
										<view class="nav-content" :class="seckillId == item.seckill_id ? 'active' : ''" v-if="key > index">敬请期待</view>
										<view class="nav-content" :class="seckillId == item.seckill_id ? 'active' : ''" v-if="key == index && !item.isNow">即将开始</view>
										<view class="nav-content" :class="seckillId == item.seckill_id ? 'active' : ''" v-if="key == index && item.isNow">抢购中</view>
										<view class="nav-content" :class="seckillId == item.seckill_id ? 'active' : ''" v-if="key < index">已结束</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view class="marketimg-box-con" v-if="value.changeType == 1" @click="isEnd(seckillIndex < index && timeList[index].isNow)">
							<scroll-view class="marketimg-box-con-scroll" :scroll-x="true" :show-scrollbar="false">
								<view v-if="!dataList.length" style="z-index: 1 !important;"><ns-empty :fixed="!1" :isIndex="!1" text="该时间段暂无商品"></ns-empty></view>
								
								<view v-else class="marketimg-box-con-item" v-for="(dataItem, i) in dataList" :key="i" @click="toDetail(dataItem.id, index)">
									<view class="wrap">
										<view class="img-box">
											<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(i)"></image>
											<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(i)"></image> -->
										</view>
										<view class="content">
											<view class="title">{{ dataItem.goods_name }}</view>
											<view class="price-box color-base-text">
												￥<text class="original-price">{{ dataItem.seckill_price }}</text>
											</view>
											<view class="num">￥{{ dataItem.price }}</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view class="marketimg-box-con" v-if="value.changeType == 2" @click="isEnd(seckillIndex < index && timeList[index].isNow)">
							<swiper class="marketimg-swiper" style="height: 340rpx;" :autoplay="false" :current="current" @change="changeCurrent">
								<swiper-item class="swiper-item" v-if="!dataList.length" style="z-index: 1 !important;"><ns-empty :fixed="!1" :isIndex="!1" text="该时间段暂无商品"></ns-empty></swiper-item>
								
								<swiper-item v-else class="swiper-item" v-for="i in Math.ceil(dataList.length/3)" >
									<view class="item" style="overflow: hidden;">
										<!-- #ifdef MP-WEIXIN -->
										<block v-for="(dataItem, dataIndex) in dataList" :key="dataIndex" v-if="dataIndex < (i + 1) * 3 && dataIndex >= (i) * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two" @click="toDetail(dataItem.id, dataIndex)">
												<view class="img-box">
													<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(dataIndex)"></image>
													<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(dataIndex)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ dataItem.goods_name }}</view>
													<view class="price-box color-base-text">
														￥<text class="original-price">{{ dataItem.seckill_price }}</text>
													</view>
													<view class="num">￥{{ dataItem.price }}</view>
												</view>
											</view>
										</block>
										<!-- #endif -->
										<!-- #ifndef MP-WEIXIN -->
										<block v-for="(dataItem, dataIndex) in dataList" :key="dataIndex" v-if="dataIndex < i * 3 && dataIndex >= (i - 1) * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two" @click="toDetail(dataItem.id, dataIndex)" >
												<view class="img-box">
													<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(dataIndex)"></image>
													<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(dataIndex)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ dataItem.goods_name }}</view>
													<view class="price-box color-base-text">
														￥<text class="original-price">{{ dataItem.seckill_price }}</text>
													</view>
													<view class="num">￥{{ dataItem.price }}</view>
												</view>
											</view>
										</block>
										<!-- #endif -->
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
			</view>
		</template>
		
		<template v-if="value.style == 2">
			<view class="diy-seckill diy-seckill2" v-if="dataList.length" :style="{ backgroundColor: value.backgroundColor, marginTop: value.marginTop * 2 + 'rpx' }">
				<view class="marketing-wrap">
					<image :src="$util.img('/upload/uniapp/seckill/style2_bg.png')" mode="widthFix"></image>
					
					<view class="marketimg-box">
						<view class="marketimg-box-title">
							<view class="marketimg-box-title-left">
								<image :src="$util.img('/upload/uniapp/seckill/style2_title.png')" mode="widthFix"></image>
								
								<view class="seckill-title-time-wrap">
									<view class="seckill-title-time" v-if="isNow">
										<view class="seckill-title-name">距离结束</view>
										<view class="seckill-H seckill-time-block">{{ seckillH ? seckillH : '00' }}</view>
										<view class="symbol">:</view>
										<view class="seckill-I seckill-time-block">{{ seckillI ? seckillI : '00' }}</view>
										<view class="symbol">:</view>
										<view class="seckill-S seckill-time-block">{{ seckillS ? seckillS : '00' }}</view>
									</view>
									<view class="seckill-title-desc">超低价格 史无前例</view>
								</view>
							</view>
							
							<view class="marketimg-box-title-right" :class="value.bgSelect" @click="toMore()">
								<text>更多秒杀</text>
								<text class="iconfont iconright"></text>
							</view>
						</view>
						
						<view class="marketimg-box-con" v-if="value.changeType == 1" @click="isEnd(seckillIndex < index && timeList[index].isNow)">
							<scroll-view class="marketimg-box-con-scroll" :scroll-x="true" :show-scrollbar="false">
								<view v-if="!dataList.length" style="z-index: 1 !important;"><ns-empty :fixed="!1" :isIndex="!1" text="该时间段暂无商品"></ns-empty></view>
								
								<view v-else class="marketimg-box-con-item" v-for="(dataItem, i) in dataList" :key="i" @click="toDetail(dataItem.id, index)">
									<view class="wrap">
										<view class="img-box">
											<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(i)"></image>
											<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(i)"></image> -->
										</view>
										<view class="content">
											<view class="title">{{ dataItem.goods_name }}</view>
											<view class="price-box color-base-text">
												￥<text class="original-price">{{ dataItem.seckill_price }}</text>
											</view>
											<view class="num">￥{{ dataItem.price }}</view>
											<!-- <view class="cart color-base-bg"><text class="iconfont icongouwuche2"></text></view> -->
											<image class="cart" @click.stop="join_cart(dataItem)" :src="$util.img('upload/uniapp/seckill/cart.png')"></image>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
						
						<view class="marketimg-box-con" v-if="value.changeType == 2" @click="isEnd(seckillIndex < index && timeList[index].isNow)">
							<swiper class="marketimg-swiper" style="height: 340rpx;" :autoplay="false" :current="current" @change="changeCurrent">
								<swiper-item class="swiper-item" v-if="!dataList.length" style="z-index: 1 !important;"><ns-empty :fixed="!1" :isIndex="!1" text="该时间段暂无商品"></ns-empty></swiper-item>
								
								<swiper-item v-else class="swiper-item" v-for="i in Math.ceil(dataList.length/3)" >
									<view class="item" style="overflow: hidden;">
										<!-- #ifdef MP-WEIXIN -->
										<block v-for="(dataItem, dataIndex) in dataList" :key="dataIndex" v-if="dataIndex < (i + 1) * 3 && dataIndex >= (i) * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two" @click="toDetail(dataItem.id, dataIndex)">
												<view class="img-box">
													<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(dataIndex)"></image>
													<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(dataIndex)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ dataItem.goods_name }}</view>
													<view class="price-box color-base-text">
														￥<text class="original-price">{{ dataItem.seckill_price }}</text>
													</view>
													<view class="num">￥{{ dataItem.price }}</view>
													<!-- <view class="cart color-base-bg"><text class="iconfont icongouwuche2"></text></view> -->
													<image class="cart" @click.stop="join_cart(dataItem)" :src="$util.img('upload/uniapp/seckill/cart.png')"></image>
												</view>
											</view>
										</block>
										<!-- #endif -->
										<!-- #ifndef MP-WEIXIN -->
										<block v-for="(dataItem, dataIndex) in dataList" :key="dataIndex" v-if="dataIndex < i * 3 && dataIndex >= (i - 1) * 3">
											<view class="marketimg-box-con-item marketimg-box-con-item_two" @click="toDetail(dataItem.id, dataIndex)" >
												<view class="img-box">
													<image :src="goodsImg(dataItem.goods_image)" mode="aspectFit" @error="imageError(dataIndex)"></image>
													<!-- <image :src="$util.img(dataItem.sku_image, { size: 'mid' })" mode="aspectFit" @error="imageError(dataIndex)"></image> -->
												</view>
												<view class="content">
													<view class="title">{{ dataItem.goods_name }}</view>
													<view class="price-box color-base-text">
														￥<text class="original-price">{{ dataItem.seckill_price }}</text>
													</view>
													<view class="num">￥{{ dataItem.price }}</view>
													<!-- <view class="cart color-base-bg"><text class="iconfont icongouwuche2"></text></view> -->
													<image class="cart" @click.stop="join_cart(dataItem)" :src="$util.img('upload/uniapp/seckill/cart.png')"></image>
												</view>
											</view>
										</block>
										<!-- #endif -->
									</view>
								</swiper-item>
							</swiper>
						</view>
					</view>
				</view>
				
				<!-- SKU选择 -->
				<!-- <ns-goods-sku ref="goodsSku" @refresh="refreshGoodsSkuDetail" :goods-detail="goodsSkuDetail" :max-buy="goodsSkuDetail.max_buy"></ns-goods-sku> -->
				<ns-goods-sku-promotionpages ref="goodSkuNew"
					@refresh="refreshGoodsSkuDetail" 
					:goods-detail="goodsSkuDetail" 
					:max-buy="goodsSkuDetail.max_buy"></ns-goods-sku-promotionpages>
			
				<ns-login ref="login"></ns-login>
			</view>
		</template>
	</view>
</template>

<script>
import globalConfig from '@/common/js/golbalConfig.js';
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue';
import nsGoodsSkuPromotionpages from '@/components/ns-goods-sku/ns-goods-sku-promotionpages.vue';
import htmlParser from '@/common/js/html-parser';
export default {
	name: 'diy-seckill',
	props: {
		value: {
			type: Object
		}
	},
	mixins: [globalConfig],
	components: {
		nsGoodsSku,
		nsGoodsSkuPromotionpages
	},
	data() {
		return {
			seckillId: 0,
			seckillIndex: null, //选中时间块的index
			index: null, //当前正在抢购的index,
			timeList: [],
			dataList: [],
			isNow: false,
			seckillH: '',
			seckillI: '',
			seckillS: '',
			seckillName: '',
			current:0,//当前的swiper
			seckillInterval:null,
			
			
			goodsSkuDetail: {},
			number: 0
		};
	},
	created() {
		this.getTimeList();
		//设置秒杀状态
		this.$store.commit('setDiySeckillInterval', 1);
	},
	watch:{
		diySeckillInterval(val,old){
			if(val == 0){
				clearInterval(this.seckillInterval)
			}else if(val == 1){
				this.getTimeList();
			}
		}
	},
	methods: {
		changeCurrent(e){
			this.current = e.detail.current
		},
		//时间转换
		transformSeckillTime(time)
		{
		   time = parseFloat(time);
		   var hour = parseInt(time / 3600);
		   var minute = parseInt((time % 3600 ) / 60);
		   var second = parseInt(time % 60);
		
		   if(hour < 10) hour = '0'+hour;
		   if(minute < 10) minute = '0'+minute;
		   if(second < 10) second = '0'+second;
		
		   return hour+':'+minute;
		},
		goodsImg(imgStr) {
			let imgs = imgStr.split(',');
			return imgs[0] ? this.$util.img(imgs[0], { size: 'mid' }) : this.$util.getDefaultImage().default_goods_img;
		},
		isEnd(isShow) {
			if (!isShow) return;
			this.$util.showToast({
				title: "限时秒杀活动已结束",
			});
		},
		getTimeList() {
			clearInterval(this.seckillInterval);
			this.seckillId = 0;
			this.isNow = false;
			this.seckillH = '';
			this.seckillI = '';
			this.seckillS = '';
			this.$api.sendRequest({
				url: '/seckill/api/seckill/lists',
				success: res => {
					let data = res.data;
					let time = new Date(res.timestamp * 1000); //当前时间

					let newTimes = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds(); //获取当前时间 时分秒的时间戳
					var tempArr = data.list.length?Object.values(data.list):[];
					tempArr.forEach((v, k) => {
						if (v.seckill_start_time <= newTimes && newTimes < v.seckill_end_time) {
							this.seckillId = v.id;
							this.index = k;
							this.seckillIndex = k;
							// this.seckillName = v.name;
							this.isNow = true;
							v.isNow = true;
						}else{
							v.isNow = false;
						}
					});

					if (!this.seckillId) {
						for (let i = 0; i < tempArr.length; i++) {
							if (newTimes < tempArr[i].seckill_start_time && i == 0) {
								this.seckillId = tempArr[i].id;
								this.index = i;
								this.seckillIndex = i;
							} else if (newTimes < tempArr[i].seckill_start_time && newTimes > tempArr[i - 1].seckill_end_time && i != 0) {
								this.seckillId = tempArr[i].id;
								this.index = i;
								this.seckillIndex = i;
							} else if (i == tempArr.length - 1 && newTimes > tempArr[i].seckill_end_time) {
								this.seckillId = tempArr[i].id;
								this.index = i;
								this.seckillIndex = i;
							}
						}
					}

					if (this.isNow && tempArr.length) {
						var self = this;
						this.seckillInterval = setInterval(function() {
							let currTime = new Date();
							let newTimes = currTime.getHours() * 60 * 60 + currTime.getMinutes() * 60 + currTime.getSeconds();
							var obj = self.$util.countDown(tempArr[self.index].seckill_end_time - newTimes);
							self.seckillH = obj.h;
							self.seckillI = obj.i;
							self.seckillS = obj.s;
							if(self.seckillH == '00' && self.seckillI == '00' && self.seckillS == '00'){ 
								var timeout = setTimeout(function(){
									self.$store.commit('setDiySeckillInterval', 0);
									self.isNow = false;
									self.seckillH = '';
									self.seckillI = '';
									self.seckillS = '';
									self.index = 1;
									clearTimeout(timeout)
									
								},2000)
							}
						}, 1000);
					}
					this.timeList = tempArr;
					if(this.seckillId){
						this.getDataList(this.seckillId);
					}
				}
			});
		},
		getDataList(seckillId) {
			this.$api.sendRequest({
				url: '/seckill/api/seckillgoods/page',
				data: {
					seckill_time_id: seckillId
				},
				success: res => {
					var data = res.data;
					if (data.list) {
						this.dataList = data.list;
						this.getCartData();
					}
				}
			});
		},
		getCartData() {
			this.$api.sendRequest({
				url: '/api/cart/lists',
				success: res => {
					if (res.code >= 0) {
						this.cartList = res.data;
		
						for (let goods_index in this.dataList) {
							let goods_item = this.dataList[goods_index],
								activity_type = goods_item.activity_type,
								activity_id = goods_item.activity_id,
								goods_id = goods_item.goods_id,
								num = 0,
								cart_id = '';
		
							for (let cart_index in this.cartList) {
								let cart_item = this.cartList[cart_index];
								
								if (activity_type == cart_item.activity_type) {
									if (activity_id == cart_item.activity_id && goods_id == cart_item.goods_id) {
										num += cart_item.num;
										cart_id = cart_item.cart_id;
									}
								}
							}
							goods_item.num = num;
							goods_item.cart_id = cart_id;
		
							if (typeof goods_item.num === 'undefined' || goods_item.num === null) {
								goods_item.num = 0;
							}
						}
						this.$forceUpdate();
					}
				}
			});
		},
		ontabtap(e, f) {
			this.seckillId = e;
			this.seckillIndex = f;
			this.current = 0
			this.getDataList(this.seckillId);
		},
		toMore() {
			this.$util.redirectTo('/promotionpages/seckill/list/list');
		},
		toDetail(id, index) {
			if (this.seckillIndex < this.index) {
				this.$util.showToast({
					title: "秒杀活动已结束！",
				});
				return;
			}
			if (this.seckillIndex > this.index) {
				this.$util.showToast({
					title: "秒杀活动还未开启，敬请期待！",
				});
				return;
			}
			
			if (this.isNow) {
				this.$util.redirectTo('/promotionpages/seckill/detail/detail', {
					seckill_id: id
				});
			} else {
				this.$util.showToast({
					title: '活动还未开始，敬请期待'
				});
			}
		},
		imageError(index) {
			this.dataList[index].sku_image = this.$util.getDefaultImage().default_goods_img;
			this.$forceUpdate();
		},
		
		
		// 加入购物车
		async join_cart(item) {
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/pages/index/index/index');
				return;
			}
			
			if (item.goods_spec_format) {
				await this.getGoodsSkuDetail(item);
			} else {
				this.cartNumChange(item);
			}
		},
		//获取购物车数量
		getCartCount() {
			this.$store.dispatch('getCartNumber').then((e) => {
				this.cartCount = e;
			})
		},
		// 刷新商品sku详情数据
		refreshGoodsSkuDetail(goodsSkuDetail) {
			Object.assign(this.goodsSkuDetail, goodsSkuDetail);
		},
		async getGoodsSkuDetail(item) {
			let res = await this.$api.sendRequest({
				url: '/seckill/api/seckillgoods/detail',
				async: false,
				data: {
					seckill_id: item.id
				}
			});
			
			if (res.code >= 0) {
				let data = res.data;
				if (data.goods_sku_detail != null) {
					this.goodsSkuDetail = data.goods_sku_detail;
					this.goodsSkuDetail.activity_id = item.activity_id;
					this.goodsSkuDetail.activity_type = item.activity_type;
					console.log(this.goodsSkuDetail);
					let time = new Date(res.timestamp * 1000);
					let currentTime = time.getHours() * 60 * 60 + time.getMinutes() * 60 + time.getSeconds();
					if (this.goodsSkuDetail.seckill_start_time <= currentTime && currentTime < this.goodsSkuDetail.seckill_end_time) {
						this.goodsSkuDetail.discountTimeMachine = this.$util.countDown(this.goodsSkuDetail.seckill_end_time - currentTime);
					} else if (this.goodsSkuDetail.seckill_start_time > currentTime && currentTime < this.goodsSkuDetail.seckill_end_time) {
						this.$util.showToast({
							title: "限时秒杀活动还未开始",
						});
						setTimeout(() => {
							this.$util.redirectTo('/pages/goods/detail/detail', {
								sku_id: this.goodsSkuDetail.sku_id
							}, 'redirectTo');
						}, 1000);
					} else if (currentTime < this.goodsSkuDetail.seckill_start_time && currentTime > this.goodsSkuDetail.seckill_end_time) {
						this.$util.showToast({
							title: "限时秒杀活动已结束",
						});
						setTimeout(() => {
							this.$util.redirectTo('/pages/goods/detail/detail', {
								sku_id: this.goodsSkuDetail.sku_id
							}, 'redirectTo');
						}, 1000);
					}
					
					this.goodsSkuDetail.show_price = this.goodsSkuDetail.seckill_price;
					
					//媒体
					if (this.goodsSkuDetail.video_url) this.switchMedia = "video";
					
					if (this.goodsSkuDetail.sku_images) this.goodsSkuDetail.sku_images = this.goodsSkuDetail.sku_images.split(",");
					else this.goodsSkuDetail.sku_images = [];
					
					this.goodsSkuDetail.unit = this.goodsSkuDetail.unit || "件";
					
					this.goodsSkuDetail.save_price = (this.goodsSkuDetail.price - this.goodsSkuDetail.seckill_price) > 0 ? (this.goodsSkuDetail.price - this.goodsSkuDetail.seckill_price).toFixed(2) : 0;
					
					// 当前商品SKU规格
					if (this.goodsSkuDetail.sku_spec_format) this.goodsSkuDetail.sku_spec_format = JSON.parse(this.goodsSkuDetail.sku_spec_format);
					// 商品SKU格式
					if (this.goodsSkuDetail.goods_spec_format) this.goodsSkuDetail.goods_spec_format = JSON.parse(this.goodsSkuDetail.goods_spec_format);
					
					this.$refs.goodSkuNew.show("join_cart", this.goodsSkuDetail, () => {
						this.getCartCount();
					});
				}
			}
		},
		// 变更购物车数量
		cartNumChange(item) {
			if (!uni.getStorageSync('token')) {
				this.$refs.login.open('/pages/index/index/index');
				return;
			}
		
			let cartData = {
					num: 1,
					cart_id: item.cart_id,
					sku_id: item.sku_id,
					activity_type: item.activity_type,
					activity_id: item.activity_id
				},
				cartUrl = "", //类型 add--新增商品  edit--修改商品数量  delete--删除商品
				actionType,
				maxBuy = item.max_buy,
				stock = maxBuy > 0 ? (maxBuy - item.purchased_num) : item.stock;
		
			var minBuy = 1;
			if (item.min_buy > 1) minBuy = item.min_buy;
			cartData.num = minBuy; // 最少购买量
		
			item.unit = item.unit || "件";
	
			// 检测是否第一次加入购物车
			if (item.cart_id) {
				actionType = "edit";
				cartUrl = '/api/cart/edit';
			} else {
				actionType = "add";
				cartUrl = '/api/cart/add';
			}
			if (stock == 0) {
				this.$util.showToast({
					title: '库存不足'
				});
				return;
			} else if (item.cart_id && item.num < stock) {
				cartData.num = ++item.num;
			} else {
				if (maxBuy > 0 && (item.purchased_num + item.num) >= maxBuy) {
					this.$util.showToast({
						title: '该商品每人限购' + maxBuy + item.unit + '，您已购买了' + item.purchased_num + item.unit
					});
					return;
				}
	
				if (maxBuy > 0 && item.num > 0 && item.num + cartData.num > maxBuy) {
					var diff = maxBuy - item.num;
					if (diff > 0) {
						this.$util.showToast({
							title: '该商品每人限购' +
								maxBuy +
								item.unit +
								'，购物车已加入了' +
								item.num +
								item.unit +
								'，还能购买' +
								diff +
								item.unit
						});
					} else {
						this.$util.showToast({
							title: '该商品每人限购' + maxBuy + item.unit
						});
					}
					return;
				}
			}
		
			if (this.cartFlag) return false;
			this.cartFlag = true;
		
			this.shopDataChange(cartData);
		
			this.$api.sendRequest({
				url: cartUrl,
				data: cartData,
				success: res => {
					if (res.code >= 0) {
						if (res.data > 0) {
							this.$store.dispatch('getCartNumber');
							this.$store.dispatch('getCartPrice');
							this.$store.dispatch('getCartIds');
							if (actionType == "edit") {
								this.cartFlag = false;
								return false;
							}
							cartData.cart_id = actionType == "add" ? res.data : '';
							if (actionType == 'add') {
								this.$util.showToast({
									title: '加入购物车成功'
								});
							}
						} else {
							cartData.num = item.num;
							this.$util.showToast({
								title: res.message
							});
						}
						this.shopDataChange(cartData);
					}
		
					this.cartFlag = false;
				}
			});
		},
		shopDataChange(data) {
			console.log(data);
			for (var i = 0; i < this.dataList.length; i++) {
				var item = this.dataList[i];
				if (data.sku_id == item.sku_id) {
					item.num = data.num;
					item.cart_id = data.cart_id;
				}
			}
			this.$forceUpdate();
		},
	},
};
</script>


<style lang="scss" scoped>
/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
	max-height: unset !important;
}

/deep/ .uni-popup__wrapper.uni-custom.bottom .uni-popup__wrapper-box {
	max-height: unset !important;
}

/deep/ .uni-popup__wrapper.uni-custom.top .uni-popup__wrapper-box {
	max-height: unset !important;
}
</style>
<style lang="scss">
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}

/deep/.uni-scroll-view ::-webkit-scrollbar {
	/* 隐藏滚动条，但依旧具备可以滚动的功能 */
	display: none;
	width: 0;
	height: 0;
	color: transparent;
	background: transparent;
}

/deep/::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
	color: transparent;
	background: transparent;
}

.diy-seckill {
	// padding: 0 30rpx;
	
	.marketing-wrap {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		overflow: hidden;
		box-sizing: border-box;
		position: relative;
		
		>image {
			width: 100%;
			position: absolute;
			top: 0;
			z-index: 1;
		}
		
		.marketimg-box {
			padding: 30rpx 0;
			position: relative;
			z-index: 2;
			
			.marketimg-box-title {
				display: flex;
				height: 32rpx;
				line-height: 32rpx;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				
				.marketimg-box-title-left {
					display: flex;
					align-items: center;
					line-height: 32rpx;
					margin-right: 18rpx;
					
					image {
						width: 126rpx;
						margin-right: 20rpx;
					}
					
					text {
						color: #909399;
					}
				}
				
				.seckill-title-time {
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					.seckill-title-name {
						margin-right: 7rpx;
						line-height: 1;
						color: #777777;
						font-size: $font-size-base;
					}
					.symbol {
						padding-left: 6rpx;
						padding-right: 6rpx;
						height: 28rpx;
						line-height: 24rpx;
					}
					.seckill-H {
						width: 30rpx;
						height: 30rpx;
						background-color: #383838;
						color: #ffffff;
						font-size: $font-size-tag;
						text-align: center;
						line-height: 30rpx;
						border-radius: 3rpx;
					}
					.seckill-I {
						width: 28rpx;
						height: 28rpx;
						background-color: #383838;
						color: #ffffff;
						font-size: $font-size-activity-tag;
						text-align: center;
						line-height: 28rpx;
						border-radius: 5rpx;
					}
					.seckill-S {
						width: 28rpx;
						height: 28rpx;
						background-color: #ff4544;
						color: #ffffff;
						font-size: $font-size-activity-tag;
						text-align: center;
						line-height: 28rpx;
						border-radius: 5rpx;
					}
				}
				
				.marketimg-box-title-right {
					display: flex;
					align-items: center;
					
					text {
						font-size: 24rpx;
					}
					
					&.red text {
						background: linear-gradient(-55deg, #FF5151 0%, #FF7B91 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					
					&.blue text {
						background: linear-gradient(-55deg, #0ECFD3 0%, #12D0AE 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					
					&.yellow text {
						background: linear-gradient(-55deg, #FEB632 0%, #FE6232 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
					
					&.violet text {
						background: linear-gradient(-55deg, #627BFD 0%, #8662FD 100%);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
					}
				}
			}
		}
		
		.seckill-time-list {
			margin-top: 30rpx;
			width: 100%;
			flex-direction: row;
			line-height: 1;
			padding: 0 30rpx;
			box-sizing: border-box;
			
			.seckil-nav {
				width: 100%;
				white-space: nowrap;
			}
			
			.nav-item {
				display: inline-block;
				text-align: center;
				border-bottom: 2rpx solid #EEEEEE;
				padding: 0 28rpx;
				
				.nav-item-con {
					padding-bottom: 20rpx;
					
					.nav-title {
						font-size: 28rpx;
						color: #606266;
						line-height: 28rpx;
					}
					
					.nav-content {
						font-size: 20rpx;
						line-height: 20rpx;
						color: #909399;
						margin-top: 10rpx;
					}
				}
				
				&.active {
					border-bottom: 2rpx solid #FF4544;
					color: #FF4544;
					
					.nav-item-con {
						
						.nav-title {
							color: #FF4544;
						}
						
						.nav-content {
							color: #FF4544;
						}
					}
				}
			}
		}
		
		.marketimg-box-con {
			width: 100%;
			height: 340rpx; 
			margin-top: 20rpx;
			// padding: 0 20rpx;
			// overflow: hidden;
			// box-sizing: border-box;
			
			.marketimg-box-con-scroll {
				width: 100%;
				flex-direction: row;
				white-space: nowrap;
				line-height: 1;
				
				.empty {
					padding-top: 20rpx;
				}
			}
			
			.marketimg-box-con-scroll {
				width: calc(100% - 30rpx);
				margin: 0 10rpx 0 20rpx;
				line-height: 1;
				white-space: nowrap;
			}
			
			.marketimg-box-con-item {
				display: inline-block;
				width: 33.333%;
				&.marketimg-box-con-item_two{
					width: calc((100% - 40rpx) / 3);
				}
				.wrap {
					margin: 0 20rpx 0 10rpx;
				}
				
				.img-box {
					width: 188rpx;
					height: 188rpx;
				}
				
				image {
					width: 188rpx;
					height: 188rpx;
					border-radius: 10rpx;
				}
				
				.content {
					.title {
						font-size: $margin-both;
						line-height: 1;
						margin-top: 20rpx;
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					
					.price-box {
						font-size: $font-size-tag;
						font-weight: bold;
						height: 32rpx;
						line-height: 32rpx;
						margin-top: 20rpx;
						
						text {
							font-size: 32rpx;
						}
					}
					
					.num {
						font-size: 20rpx;
						line-height: 20rpx;
						color: #909399;
						margin-top: 20rpx;
						text-decoration: line-through;
					}
				}
			}
			
			.marketimg-swiper {
				width: 100%;
				
				.swiper-item {
					padding: 0 30rpx;
					box-sizing: border-box;
				}
				
				.marketimg-box-con-item {
					margin-right: 20rpx;
				
					&:nth-child(3n + 3) {
						margin-right: 0;
					}
				}
			}
		}
	}
}
/deep/ .empty{
	height:332rpx;
}


.diy-seckill2 {
	.marketing-wrap {
		.marketimg-box {
			padding: 29rpx 0;
			box-sizing: border-box;
			
			.marketimg-box-title {
				height: 66rpx;
				padding: 0 22rpx;
				
				.marketimg-box-title-left {
					image {
						width: 61rpx !important;
						height: 66rpx !important;
					}
					
					.seckill-title-time-wrap {
						.seckill-title-time {
							
							.seckill-title-name {
								color: #FFFFFF;
								margin-right: 8rpx;
							}
							
							.seckill-time-block {
								background-color: #FFFFFF;
								width: 30rpx;
								height: 30rpx;
								line-height: 30rpx;
								font-size: 24rpx;
								border-radius: 3rpx;
								color: #FF4E3A;
							}
							
							.symbol {
								color: #FFFFFF;
							}
						}
						
						.seckill-title-desc {
							color: #FFFFFF;
							font-size: 20rpx;
							line-height: 1;
							margin-top: 16rpx;
						}
					}
				}
				
				.marketimg-box-title-right {
					background-color: #FFFFFF;
					width: 160rpx;
					height: 60rpx;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
		
		.marketimg-box-con {
			margin-top: 27rpx;
			
			.marketimg-box-con-scroll {
				width: calc(100% - 20rpx);
				margin: 0 5px 0 5px;
			}
			
			.marketimg-box-con-item {
				height: 340rpx;
				.wrap {
					height: 340rpx;
					margin: 0 5px 0 5px;
					background-color: #FFFFFF;
					border-radius: 10rpx;
					overflow: hidden;
				}
				
				.img-box {
					width: 204rpx;
					height: 202rpx;
				}
				
				image {
					width: 204rpx;
					height: 204rpx;
				}
				
				.content {
					padding: 0 15rpx 18rpx;
					position: relative;
					
					.title {
						font-weight: bold;
					}
					
					.price-box {
						margin-top: 16rpx;
					}
					.num {
						line-height: 1;
						margin-top: 13rpx;
					}
					
					.cart {
						position: absolute;
						right: 15rpx;
						bottom: 18rpx;
						width: 44rpx;
						height: 44rpx;
						border-radius: 50%;
						text-align: center;
						line-height: 44rpx;
						
						text {
							color: #FFFFFF;
							font-size: 24rpx;
						}
					}
				}
			}
			
			.marketimg-swiper {
				.swiper-item {
					padding: 0 20rpx;
				}
				.marketimg-box-con-item {
					background-color: #FFFFFF;
					border-radius: 10rpx;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
